/*
思路：
把逻辑复用
封装：
vue2 复用 
vue3 复用 提取成函数 类似react的hooks
函数体：重复使用的代码
形参：请求方法，查询参数
返回值：响应数据，分页相关的数据
使用 useTable中解构出来返回需要用的数据


export default function useTable (请求方法，查询参数){
    // 重复的代码 ...todo 
    return {响应数据、分页相关的数据}
}
*/


// import * as http from '@/request/http'
import type { Ref } from 'vue'

import { reactive, ref } from 'vue';
interface IResModel {
    list: any;
    total: number
}
export default function useTable<P, R extends IResModel>(reqApi: (params: P) => RES<R>, reqParams: any) {

    //相当于IAdminListModel['list'] 返回IUserModel[]
    //相当于IRoleListModel['list'] 返回IRoleModel[]
    const tableData: Ref<R['list']> = ref([])
    // const userList = ref<IUserModel[]>([])
    const paginationParams = reactive({
        total: 0,
        pageNum: 1,//
        pageSize: 10,//

    })
    const queryList = () => {
        // console.log(reqParams);//{keyword: '1'}
        reqApi({
            pageNum: paginationParams.pageNum,
            pageSize: paginationParams.pageSize,
            ...reqParams
        }).then((res) => {
            tableData.value = res.data.list
            paginationParams.total = res.data.total
        })
    }

    // 分页
    queryList()
    const handleSizeChange = (val: number) => {
        paginationParams.pageSize = val
        queryList()
    }
    const handleCurrentChange = (val: number) => {
        paginationParams.pageNum = val
        queryList()
    }

    return {
        tableData,//响应数据
        paginationParams,//分页器参数
        handleSizeChange,//点击页容量
        handleCurrentChange,//点击页码
        queryList,//检索方法,
    }
    // tableData,  paginationParams,    handleSizeChange, handleCurrentChange,queryList
}